<!doctype html>
<html class="no-js">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport"
          content="width=device-width, initial-scale=1">
    <title>Let's Chat</title>

    <!-- Set render engine for 360 browser -->
    <meta name="renderer" content="webkit">

    <!-- No Baidu Siteapp-->
    <meta http-equiv="Cache-Control" content="no-siteapp"/>

    <link rel="icon" type="image/png" href="assets/i/favicon.png">

    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes">
    <link rel="icon" sizes="192x192" href="assets/i/app-icon72x72@2x.png">

    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">

    <!-- Tile icon for Win8 (144x144 + tile color) -->
    <meta name="msapplication-TileImage" content="assets/i/app-icon72x72@2x.png">
    <meta name="msapplication-TileColor" content="#0e90d2">

    <link rel="stylesheet" href="css/amazeui.min.css">
    <link rel="stylesheet" href="css/emoji.css">
    <link rel="stylesheet" href="css/app.css">
</head>
<body>

<div class="am-container chat">
    <header class="am-topbar am-topbar-inverse am-margin-bottom-0">
        <div class="am-topbar-brand">
            <strong><i class="am-icon-comments"></i> Let's Chat</strong>
            <small class="am-margin-left-xl"><i class="am-icon-signal"></i> <span id="status">未连接</span></small>
        </div>
        <button class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-success am-show-sm-only" data-am-collapse="{target: '#topbar-collapse'}"><span class="am-sr-only">导航切换</span> <span class="am-icon-bars"></span></button>
        <div class="am-collapse am-topbar-collapse" id="topbar-collapse">
            <ul class="am-nav am-nav-pills am-topbar-nav am-topbar-right">
                <li id="ddFileLib" class="am-dropdown" data-am-dropdown="">
                    <a class="am-dropdown-toggle" data-am-dropdown-toggle="" href="javascript:;" title="文件库">
                        <i class="am-icon-database"></i>
                    </a>
                    <div class="am-dropdown-content am-text-sm am-padding-0 fileLib">
                        <table class="am-table am-table-striped am-table-hover am-table-compact am-margin-bottom-0" style="color:#333;">
                            <thead><tr><th>文件名</th><th>大小</th><th>修改日期</th><th>下载</th></tr></thead>
                            <tbody id="fileList">
                            </tbody>
                        </table>
                    </div>
                </li>
                <li><a id="btnExit" href="javascript:;" title="退出"><i class="am-icon-power-off"></i></a></li>
            </ul>
        </div>
    </header>

    <div class="chat-container">
        <div class="am-panel am-panel-secondary chat-sidebar">
            <div class="am-panel-hd">
                <h3 class="am-panel-title">在线用户</h3>
            </div>
            <ul id="userList" class="am-list am-list-static chat-userList">
            </ul>
        </div>
        <div class="chat-area">
            <div class="chat-info">
                <ul id="msgList" class="chat-info-list">
                </ul>
            </div>
            <div class="chat-input">
                <div contenteditable="true" id="txtContent" class="content"></div>
            </div>
            <div>
                <ul class="chat-toolbar">
                    <li class="chat-toolbar-icon">
                        <div id="ddFace" class="am-dropdown am-dropdown-up" data-am-dropdown>
                            <a href="javascript:;" class="am-dropdown-toggle am-text-xl" title="表情"><i class="am-icon-smile-o"></i></a>
                            <div class="am-dropdown-content" style="padding:10px;">
                                <div class="am-tabs" data-am-tabs="{noSwipe: 1}">
                                    <ul class="am-tabs-nav am-nav am-nav-tabs">
                                        <li class="am-active"><a href="javascript: void(0)">QQ表情</a></li>
                                        <li><a href="javascript: void(0)">emoji表情</a></li>
                                    </ul>
                                    <div class="am-tabs-bd">
                                        <div class="am-tab-panel am-active">
                                            <div id="qqFace" class="qq-face emotion-tabs"></div>
                                        </div>
                                        <div class="am-tab-panel">
                                            <div id="emoji" class="emoji emotion-tabs"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="chat-toolbar-icon">
                        <a id="btnPicture" href="javascript:;" class="am-text-xl" title="图片"><i class="am-icon-picture-o"></i> </a>
                        <input id="filePicture" type="file" accept="image/*" class="am-hide">
                    </li>
                    <li class="chat-toolbar-icon">
                        <a id="btnFile" href="javascript:;" class="am-text-xl" title="文件"><i class="am-icon-folder-o"></i> </a>
                        <input id="fileUpload" type="file" class="am-hide">
                        <div id="progress" class="am-progress am-progress-xs am-margin-top am-margin-bottom-0 am-inline-block am-hide" style="width:100px;">
                            <div class="am-progress-bar" style="width: 80%"></div>
                        </div>
                    </li>
                </ul>
                <button id="btnSend" type="button" class="am-btn am-btn-primary am-btn-sm am-fr am-margin-right-xs am-radius"><i class="am-icon-paper-plane"></i> 发送(Enter)</button>
            </div>
        </div>
    </div>
</div>

<div class="am-modal-actions" id="modalPicture">
    <div class="am-modal-actions-group">
        <img id="imghead" src="" onerror="this.width='100';this.height='100';this.src=''"/>
    </div>
    <div class="am-modal-actions-group">
        <ul class="am-avg-sm-2">
            <li><button class="am-btn am-btn-danger am-btn-block" data-am-modal-close>取消</button></li>
            <li><button id="btnSendPicture" type="button" class="am-btn am-btn-secondary am-btn-block">发送</button></li>
        </ul>
    </div>
</div>

<div class="am-modal am-modal-confirm" id="modalFile">
    <div class="am-modal-dialog">
        <div class="am-modal-hd">上传确认</div>
        <div class="am-modal-bd">
            你确认上传文件
            <strong></strong>
            吗？
        </div>
        <div class="am-modal-footer">
            <span class="am-modal-btn" data-am-modal-cancel>取消</span>
            <span class="am-modal-btn" data-am-modal-confirm>确定</span>
        </div>
    </div>
</div>

<!--在这里编写你的代码-->

<!--[if (gte IE 9)|!(IE)]><!-->
<script src="js/jquery.min.js"></script>
<!--<![endif]-->
<!--[if lte IE 8 ]>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->
<script src="js/amazeui.min.js"></script>
<script src="js/jquery.slimscroll.js"></script>
<script src="js/socket.io.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>